let config = {
  labelWidth: "70px",
};

export function outStr(list) {
  let str = "";
  let formData = {};
  let selectData = "";
  let watchData = "";

  list.forEach((item) => {
    let content = "";
    if (item.type == "input") {
      content = `<el-input v-model="formData.${item.id}" placeholder="${item.placeholder}" />`;
      formData[item.id] = "";
      // str += `<el-input placeholder='${item.placeholder || ""}'></el-input>`;
    }

    if (item.type == "number") {
      content = `<el-input type="number" v-model="formData.${item.id}" placeholder="${item.placeholder}" />`;
      formData[item.id] = "";
      // str += `<el-input placeholder='${item.placeholder || ""}'></el-input>`;
    }
    if (item.type == "textarea") {
      content = `<el-input type="textarea" v-model="formData.${item.id}" placeholder="${item.placeholder}" />`;
      formData[item.id] = "";
      // str += `<el-input placeholder='${item.placeholder || ""}'></el-input>`;
    }
    if (item.type == "select") {
      content = `<el-select v-model="formData.${item.id}" placeholder="${item.placeholder}">
                    <el-option
                      v-for="item in ${item.selectKey}"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>`;
      formData[item.id] = "";
    }

    if (item.type == "radio") {
      content = `
        <el-radio-group v-model="formData.${item.id}" >
                    <el-radio
                      v-for="(item, index) in ${item.selectKey}"
                      :label="item.label"
                      :key="item.id"
                      :value="item.id"
                      ></el-radio
                    >
                  </el-radio-group>
      `;
      formData[item.id] = "";
    }

    if (item.type == "check") {
      content = `
        <el-checkbox-group
                    v-model="formData.${item.id}"
                  >
                    <el-checkbox
                    v-for="(item, index) in ${item.selectKey}"
                    :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    ></el-checkbox>
                  </el-checkbox-group>
      `;
      formData[item.id] = [];
    }
    if (item.type == "switch") {
      content = `
      <el-switch  v-model="formData.${item.id}" active-text="" inactive-text="" />
      `;
      formData[item.id] = true;
    }

    if (item.type == "time") {
      content = `
      <el-date-picker
      v-model="formData.${item.id}"
      clearable
      value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="${item.placeholder}"
                  />
      `;
      formData[item.id] = "";
    }

    if (item.type == "time-range") {
      content = `
     <el-date-picker
      v-model="formData.${item.id}"
      clearable
      value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetimerange"
                    placeholder="${item.placeholder}"
                    range-separator="至"
                    start-placeholder="Start date"
                    end-placeholder="End date"
                  />
      `;
      formData[item.id] = [];
      formData[item.time1] = "";
      formData[item.time2] = "";

      watchData += `
      watch(()=>formData.${item.id},()=>{
          if(formData.${item.id}&&formData.${item.id}.length){
          formData.${item.time1}= formData.${item.id}[0];
      formData.${item.time2} = formData.${item.id}[1];;
          }else{
          formData.${item.time1}= "";
      formData.${item.time2} = "";
          }
        })
      `;
    }

    let trigger = "blur";
    if (
      ["select", "radio", "check", "time", "time-range", "switch"].includes(
        item.type
      )
    ) {
      trigger = "change";
    }
    if (["select", "radio", "check"].includes(item.type)) {
      trigger = "change";
      selectData += `let ${item.selectKey}=$ref([]);`;
    }

    let rule = `
      [{
      required: ${item.required},
      message: "${item.placeholder}",
      trigger:" ${trigger}",
    }]
    `;

    str += `
        <el-col :span="${item.span}" >
              <el-form-item label="${item.label}" prop="${item.id}" :rules='${rule}'>
              ${content}
              </el-form-item>
            </el-col>
      `;

    // <template v-if="item.type == 'input'">

    //             </template>
    //             <template v-if="item.type == 'select'">
    //
    //             </template>
  });

  let outstr = `
  <template>
    <!--  -->
    <div class='main'>
      <div class='content'>
         <el-form label-width="${config.labelWidth}" :model="formData">
          <el-row>
            ${str}
          </el-row>
        </el-form>
      </div>
    </div>
  </template>

  <script setup>
  import { onMounted,watch } from "vue";
  import useUtils from "@/utils";
  const { $common, $router, $store, $global } = useUtils();


  onMounted(()=>{
    getSelectData()
  });

  ${selectData}

  ${watchData};

  function getSelectData(){

  };
  
  let formData=$ref(${JSON.stringify(formData)});

  </script>
  <style lang="scss" scoped>
  </style>`;

  return outstr;
}
